<template>
  <div id="app1">
    <div class="sidebar">
      <ul>
        <li v-for="lab in labs" :key="lab.id" @click="showModal(lab)">{{ lab.title }}</li>
      </ul>
    </div>
    <img src="../../public/600.png" alt="Banner Image" class="banner-image" />
    <Header/>
    <div class="sc">
      <div class="scrolling-text">
        {{ scrollingMessage }}
      </div>
    </div>
    <div class="container">
      <div class="content-module">
        <h2>计算机科学基础实验室</h2>
        <h3>一、实验室建设情况</h3>
        <p>
          计算机科学基础实验室成立于2012年7月，是信息与计算机技术实践教学综合性专业化的计算机类实践教学中心。教学中心面向全校，主要承担计算机系统类、电子信息类、计算机软件工程实践类、计算机应用技术类、数学软件类、硬件及嵌入式应用网络技术类、信息管理类等的课程的实践教学课程与创新活动。实验室位于我校最主要的教学楼——丹青楼的9层，总建筑面积4150平方米。实验室共有14个实验机房和1个中心交换机服务器机房，设备涵盖计算机软件技术、计算机系统综合、计算机网络与安全技术、信息管理系统、电子信息与通信工程等5大类，实验机位超过800个，便于集中式教学和开放管理。
        </p>
        <h3>二、设备投入</h3>
        <p>
          计算机科学基础实验室的设备总数超过2000台（套），总值达1500万元。实验教学中心配备有计算机800台套、计算机系统结构及计算机组成原理实验箱90套、单片机原理、ARM、FPGA、物联网等硬件实验箱180余套，以及电子信息与通信工程专业的测试仪器和实验箱912台（套），全面支持计算机基础教育课程组的实践教学。计算机科学基础实验室组建后，实现了资源共享，优势互补的办学目标，自动化的实践教学管理和人性化的教学服务，为师生各类实验教学活动提供了优质的学习实践环境。
        </p>
        <img class="pian" src="../../public/620.png">
      </div>
    </div>
    <div v-if="isModalVisible" class="modal">
      <h3>{{ showModalData.title }}</h3>
      <p>{{ showModalData.description }}</p>
      <img v-if="showModalData.imageUrl" :src="showModalData.imageUrl" alt="Lab Image" />
      <button @click="hideModal">关闭</button>
    </div>
    <div class="sidebar-right">
      <div v-for="(image, index) in images" :key="index" class="image-item">
        <img :src="image.src" :alt="image.description">
        <p class="wenzi">{{ image.description }}</p>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
import Header from '../components/Header.vue';
import Footer from '../components/Footer.vue';
export default {
  components: {
    Header,
    Footer
  },
  name: 'PoliticalHistory',
  data() {
    return {
      message: '为贯彻落实教育部推进教育系统软件正版化工作要求，加强知识产权保护意识，满足全校师生使用正版软件需求，学校正版软件管理与服务平台已完成部署，即日起上线运行提供正版软件下载使用服务。',
      showLeftAd: true,
      showRightAd: true,
      labs: [
        { id: 901, title: '实验室901', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 902, title: '实验室902', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 903, title: '实验室903', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 904, title: '实验室904', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 905, title: '实验室905', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 906, title: '实验室906', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 907, title: '实验室907', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 908, title: '实验室908', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 909, title: '实验室909', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 910, title: '实验室910', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 911, title: '实验室911', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 912, title: '实验室912', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 913, title: '实验室913', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 914, title: '实验室914', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 915, title: '实验室915', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 916, title: '实验室916', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 917, title: '实验室917', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 918, title: '实验室918', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 919, title: '实验室919', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 920, title: '实验室920', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 921, title: '实验室921', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },
        { id: 922, title: '实验室922', description: '实验室共有设备：60台；可容纳人数：60人',imageUrl: '../../public/633.jpg' },

      ],
      showModalData: null,
      isModalVisible: false,
      images: [
        { src: '../../public/634.png', description: '历年获奖统计' },
        { src: '../../public/636.png', description: '比赛现场' },
        { src: '../../public/637.png', description: '实验室实况' },
        { src: '../../public/638.png', description: '获奖图片1' },
        { src: '../../public/639.png', description: '获奖图片2' },
        { src: '../../public/640.png', description: '获奖图片3' },
        { src: '../../public/641.png', description: '获奖图片4' },
        { src: '../../public/642.png', description: '获奖图片5' },
      ],
    };
  },
  computed: {
    scrollingMessage() {
      const sliceLength = this.message.length;
      return this.message.slice(this.scrollPosition) + this.message.slice(0, this.scrollPosition);
    }
  },
  beforeDestroy() {
    clearInterval(this.scrollInterval);
  },
  methods: {
    closeLeftAd() {
      this.showLeftAd = false;
    },
    closeRightAd() {
      this.showRightAd = false;
    },
    showModal(lab) {
      this.showModalData = lab;
      this.isModalVisible = true;
    },
    hideModal() {
      this.isModalVisible = false;
    }
  }
}
</script>

<style scoped>
.pian {
  height: 900px;
}
.sc {
  background-color: rgb(255, 218, 150);
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 确保最新要闻和滚动文本分别在容器的两端 */
  width: 100%; 
}
.xin {
  white-space: nowrap; /* 防止文本换行 */
  margin-right: 10px; /* 与滚动文本的间距 */
}
.scrolling-text {
  background-color: rgb(255, 218, 150);
  white-space: nowrap;
  overflow: hidden;
  font-size: 15px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  width: auto; /* 固定滚动部分的长度 */
  animation: marquee 60s linear infinite; 
}
@keyframes marquee {
  from { transform: translateX(100%); } /* 从页面最右侧开始 */
  to { transform: translateX(-100%); } /* 到最新新闻右侧10px处消失 */
}
.container {
  background-color: aliceblue;
  display: flex;
  justify-content: space-between;
  margin-bottom: 42px;
  padding: 0 300px; /* 添加左右padding */
}
.content-module {
  width: 100%; /* 使内容模块占满整个容器宽度 */
  padding: 20px; /* 内容模块内部的padding */
  box-sizing: border-box; /* 包括padding在内的宽度计算 */
  background-color: white;
}
.content-module h2, .content-module h3 {
  color: #333;
  margin-top: 20px;
}
.content-module p {
  text-indent: 2em; /* 段落首行缩进 */
  line-height: 1.6; /* 行高 */
  color: #666;
}
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 100%;
  background-color: #e1f2fe;
  overflow-y: auto;
  z-index: 1000;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar li {
  padding: 10px;
  cursor: pointer;
}

.sidebar li:hover {
  background-color: #b9c7ff;
}

.modal {
  position: fixed;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(249, 249, 238);
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  display: flex; /* 从 none 改为 flex */
  flex-direction: column;
  align-items: center;
}

.sidebar-right {
  position: fixed;
  right: 0;
  top: 0;
  width: 200px;
  height: 100%;
  background-color: #e1f2fe;
  overflow-y: auto;
  z-index: 1000;
  padding: 20px 0;
}

.image-item {
  padding-left:5px;
  padding-right:10px;
  padding-top: 10px;
  margin-bottom: 20px;
  text-align: center;
  background-color: rgb(255, 255, 255);
}
.wenzi {
  margin-top: -8px;
  color:rgb(220, 19, 19);
}
.image-item img {
  width: 100%;
  height: auto;
  margin-bottom: 5px;
}
</style>